import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Select } from 'antd';

const { Option } = Select;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

function QueryScheme({ visiable, close, status, form }) {
  const { getFieldDecorator } = form;
  return (
    <Modal
      title={status === 'add' ? '新增方案' : status === 'detail' ? '查看方案' : '修改方案'}
      width="500px"
      destroyOnClose
      footer={
        status === 'detail' ? null : (
          <Button type="primary" onClick={close}>
            保存
          </Button>
        )
      }
      onCancel={close}
      visible={visiable}
    >
      <Form>
        <Form.Item label="方案名称" {...formItemLayout}>
          {getFieldDecorator('externalUserId', {
            rules: [
              {
                required: true,
                message: '目录名称不能为空',
              },
            ],
          })(<Input disabled={status === 'detail' ? true : false} placeholder="请输入" />)}
        </Form.Item>
        <Form.Item label="方案顺序" {...formItemLayout}>
          {getFieldDecorator('externalUse')(
            <Input disabled={status === 'detail' ? true : false} placeholder="请输入" />
          )}
        </Form.Item>
        <Form.Item label="上级目录" {...formItemLayout}>
          {getFieldDecorator('externalUserCode')(
            <Select disabled={status === 'detail' ? true : false} placeholder="请输入">
              <Option value="lucy">Lucy</Option>
              <Option value="macal">Macal</Option>
              <Option value="marry">Marry</Option>
              <Option value="james">James</Option>
            </Select>
          )}
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default Form.create()(QueryScheme);
